<template>
	<div class="bigDiv">
		<el-form :inline="true" label-width="100px">
			<div class="topNav">
				<el-button type="text" icon="el-icon-search" @click="getList" style="float:right;">搜索</el-button>
				<el-button type="text" icon="el-icon-refresh" @click="reset"
					style="float:right;margin-right:10px;">重置</el-button>
				<el-button type="text" icon="el-icon-plus" @click="editProduct">新增物业费</el-button>
			</div>
			<el-row :gutter="20">
				<div style="margin:0 20px;">
					<el-form-item label="类型">
						<el-select v-model="queryParams.type" placeholder="请选择" clearable>
							<el-option v-for="(item, index) in typeOptions" :key="index" :label="item.fullName"
								:value="item.id" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="收费项目名">
						<el-input v-model="queryParams.name" placeholder="请输入" clearable></el-input>
					</el-form-item>
				</div>
			</el-row>
		</el-form>
		<el-table v-loading="loading" :data="list" border height="calc(100vh - 320px)">
			<el-table-column label="收费项目名" align="center" prop="name"></el-table-column>
			<el-table-column label="单价" align="center" prop="price"></el-table-column>
			<el-table-column label="数量" align="center" prop="numType"></el-table-column>
			<el-table-column label="创建时间" align="center" prop="creatorTime"></el-table-column>
			<el-table-column label="创建用户" align="center" prop="creatorUserId"></el-table-column>
			<el-table-column label="修改用户" align="center" prop="lastModifyUserId"></el-table-column>
			<el-table-column label="修改时间" align="center" prop="lastModifyTime"></el-table-column>
			<el-table-column label="删除用户" align="center" prop="deleteUserId"></el-table-column>
			<el-table-column label="删除时间" align="center" prop="deleteTime"></el-table-column>
			<el-table-column label="有效标志" align="center" prop="enabledMark"></el-table-column>
			<!-- 以下字段字符串未更改 -->
			<el-table-column label="物业费" align="center" prop="enabledMark"></el-table-column>
			<el-table-column label="物业费缴费时间" align="center" prop="enabledMark"></el-table-column>
			<el-table-column label="物业费缴费状态" align="center" prop="enabledMark"></el-table-column>
			<el-table-column label="电梯费" align="center" prop="enabledMark"></el-table-column>
			<el-table-column label="电梯费缴费时间" align="center" prop="enabledMark"></el-table-column>
			<el-table-column label="电梯费缴费状态" align="center" prop="enabledMark"></el-table-column>
			<el-table-column label="停车费" align="center" prop="enabledMark"></el-table-column>
			<el-table-column label="停车费缴费时间" align="center" prop="enabledMark"></el-table-column>
			<el-table-column label="停车费缴费状态" align="center" prop="enabledMark"></el-table-column>
			<!-- xx -->
			<el-table-column label="操作" align="center" width="220" fixed="right">
				<template slot-scope="scope">
					<div class="centered-content">
						<el-button type="text" size="mini" class="editBtn" @click="editProduct(scope.row)">
							编辑
						</el-button>
						<el-button type="text" size="mini" class="deleteBtn" @click="delProduct(scope.row)">
							删除
						</el-button>
						<el-button type="text" size="mini" class="detailBtn" @click="lookProduct(scope.row)">
							详情
						</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />

		<!-- 物业费维护弹窗 -->
		<el-dialog title="物业费维护" :visible.sync="productModel" :close-on-click-modal="false"
			:close-on-press-escape="false" width="40%">
			<el-form ref="elForm" :model="dataForm" label-width="100px" :rules="rules">
				<el-form-item label="收费项目名" prop="name">
					<el-input v-model="dataForm.name" placeholder="请输入收费项目名" />
				</el-form-item><el-form-item label="单价" prop="price">
					<el-input v-model="dataForm.price" placeholder="请输入单价" />
				</el-form-item>
				<el-form-item label="数量" prop="numType">
					<el-input v-model="dataForm.numType" placeholder="请输入单价" />
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="productModel = false">取 消</el-button>
				<el-button type="primary" @click="submitProduct()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	// 上传文件
	import {
		selectConfigFeeItemBlock,
		insertConfigFeeItemBlock,
		editConfigFeeItemBlock,
		deleteConfigFeeItemBlock
	} from '@/api/wuye.js'
	import fileUpdata from '@/api/file.config'
	export default {
		name: "wuyefei",
		// 页面数据
		data() {
			return {
				queryParams: {
					pageNum: 1, // 显示第一页数据
					pageSize: 10, //每页显示十条
					startTime: "",
					endTime: "",
					productName: "",
				},
				dataForm: {
					name: '',
					price: '',
					numType: ''
				},
				editId: '',
				loading: false,
				list: [],
				total: 0, // 一共多少条数据
				productModel: false,
				rules: {
					productName: [{
						required: true,
						message: "请您输入物业费名称",
						trigger: "blur"
					}],
				},
				typeOptions: [{
						fullName: '常规收费项（商铺）',
						id: 'house'
					},
					{
						fullName: '临时收费项',
						id: 'temp'
					},
					{
						fullName: '押金类收费项',
						id: 'deposit'
					},
				],
			};
		},
		// 初始化
		mounted() {
			this.getList();
		},
		// 函数集合
		methods: {
			// 修改物业费
			editProduct(row) {
				this.editId = row.id
				if (row.id) {
					// 修改
					this.dataForm = row;
				} else {
					// 新增
					this.dataForm = {};
				}
				console.log('dataForm', this.dataForm)
				this.productModel = true;
			},
			// 删除物业费
			delProduct(row) {
				this.$confirm("是否删除？", "提示", {
						confirmButtonText: "确 认",
						cancelButtonText: "取 消"
					}).then(() => {
						deleteConfigFeeItemBlock({
							...row
						}).then(res => {
							if (res.code == 200) {
								this.$message({
									message: res.msg,
									type: 'success',
									duration: 1000,
									onClose: () => {
										this.visible = false;
										this.$message.success("删除物业费成功");
										this.getList();
									},
								});
							}
						})
					})
					.catch(() => console.info("操作取消"));
			},
			//提交物业费
			submitProduct() {
				this.$refs['elForm'].validate(valid => {
					if (valid) {
						if (this.editId) {
							editConfigFeeItemBlock({
								...this.dataForm
							}).then(res => {
								if (res.code == 200) {
									this.$message({
										message: res.msg,
										type: 'success',
										duration: 1000,
										onClose: () => {
											this.productModel = false;
											this.getList();
										},
									});
								}
							})
						} else {
							insertConfigFeeItemBlock({
								...this.dataForm
							}).then(res => {
								if (res.code == 200) {
									this.$message({
										message: res.msg,
										type: 'success',
										duration: 1000,
										onClose: () => {
											this.productModel = false;
											this.getList();
										},
									});
								}
							})
						}
					}
				})

			},
			//初始化列表
			getList() {
				this.loading = false;
				selectConfigFeeItemBlock({
					...this.queryParams
				}).then(res => {
					this.list = res.rows;
					this.total = res.total
				})
			},
			reset() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10
				};
				this.resetForm('form');
			},

		}
	}
</script>
<style scoped lang='scss'>
	.editBtn span {
		color: red;
	}

	.deleteBtn span {
		color: red;
	}

	.detailBtn span {
		color: red;
	}

	.el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 100%;
	}

	.detailForm {
		.el-form-item {
			margin-bottom: 0px;
		}
	}
	.centered-content {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>